<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>柱状图</title>
		<!-- 引入echarts.js文件 -->
		<script src="./js/echarts.js"></script>
	</head>
	<body>
		<div id="box1" style="width: 600px; height: 400px;"></div>
		<button id="modify">修改数据</button>
		<button id="add">增加数据</button>
		<script>
			let myCharts = echarts.init(document.querySelector('#box1'))
			let xDataArr = ['张三', '李四', '王五', '大明', '小明', '大妞', '二妞', '大强']
			let yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
			let options = {
				xAxis: {
					type: 'category',
					data: xDataArr
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					name: '语文',
					type: 'bar',
					markPoint: {
						data: [{
								type: 'max',
								name: '最大值'
							},
							{
								type: 'min',
								name: '最小值'
							}
						]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					data: yDataArr1
				}],
			}
			myCharts.setOption(options)
			let btnModify = document.querySelector('#modify')
			btnModify.onclick = function() {
				let newYDataArr = [68, 32, 99, 77, 94, 80, 72, 86]
				//setOption 可以设置多次
				// 新的option 和 旧的option
				// 新旧option的关系并不是相互覆盖的关系，是相互整合的关系
				// 我们在设置新的option的时候，只需要考虑到变化的部分就可以
				let options = {
					series: [{
						data: newYDataArr
					}],
				}
				myCharts.setOption(options)
			}
			let btnAdd = document.querySelector('#add')
			btnAdd.onclick = function() {
				let yDataArr2 = [90, 85, 70, 85, 92, 85, 85, 93]
				xDataArr.push('小长')
				yDataArr1.push(90)
				let options = {
					legend: {
						data: [
							'语文', '数学'
						]
					},
					xAxis: {
						data: xDataArr
					},
					series: [{
							data: yDataArr1
						},
						{
							name: '数学',
							type: 'bar',
							markPoint: {
								data: [{
										type: 'max',
										name: '最大值'
									},
									{
										type: 'min',
										name: '最小值'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: '平均值'
								}]
							},
							data: yDataArr2
						}
					],
				}
				myCharts.setOption(options)
			}
			window.addEventListener("resize", () => {
				myCharts.resize();
			});
		</script>
	</body>
</html>
